<template>
	<view>
		<view class="top-bar">
			<view class="top-bar-center">
				<text>{{}}</text>
			</view>
		</view>
		<view class="chat-main">
			<view class="chat-list">
				<view class="chat-items" v-for="(item, index) in Arr" :key="index">
					<view class="chat-item-left" v-if="item.id===1">
						<view class="chat-header">
							<text>{{item.date}}</text>
						</view>
						<view class="chat-content">
							<view class="usesr-avatar">
								<image :src="item.img"></image>
								<text>{{item.name}}</text>
							</view>
							<view class="user-text">
								<text>{{item.msg}}</text>
							</view>
						</view>
					</view>
					<view class="chat-item-right" v-if="item.id===2">
						<view class="chat-header">
							<text>{{item.date}}</text>
						</view>
						<view class="chat-content">
							<view class="usesr-avatar">
								<image :src="item.img"></image>
								<text>{{item.name}}</text>
							</view>
							<view class="user-text-right">
								<view class="user-text-right-box"></view>
								<text>{{item.msg}}</text>
							</view>
						</view>
					</view>
					<view class="chat-item-left" v-if="item.id===4">
						<view class="chat-header">
							<text>4月12号 13:20</text>
						</view>
						<view class="chat-content">
							<view class="usesr-avatar">
								<image src="../../static/img/index/play.png"></image>
								<text>蕾姆</text>
							</view>
							<view class="user-image">
								<image src="../../static/img/index/play.png"></image>
							</view>
						</view>
					</view>
					<view class="join-center" v-if="item.id===3">
						<text>{{item.name}}</text>
					</view>
				</view>
				<!-- <view class="none" v-for="item in Arr">
						<p>{{item.msg}}</p>
				  </view> -->
			</view>
		</view>
		<view class="chat-botton">
			<view class="left-icon">
				<image src="/static/image/index/yuyin.png"></image>
			</view>
			<view class="input-box">
				<input type="text" value="" v-model="words" />
			</view>
			<view class="right-icon">
				<!-- <image src="/static/image/index/biaoqin.png"></image>
			<image src="/static/image/index/add.png"></image> -->
				<button @click="sendPravte">发送</button>
			</view>
		</view>
	</view>
</template>


<script>
	import functionList from '../../function/index.js'
	const RCUniPush = uni.requireNativePlugin('RongCloud-Push-RCUniPush')
	export default {
		data() {
			return {
			
			    functionList:functionList,
				curinitFormInfo: {},
				curconnectFormInfo: {},
				curFormVisible: false
			}
		},
		onLoad() {
			console.log('设置 push 事件');
		 
			this.curinitFormInfo = functionList[0].list[0];
			this.curconnectFormInfo = functionList[0].list[1];
		 
			this.runinitAction();
			//
		},
		computed: {
			
			
		},
		methods: {
			runinitAction() {
				this.curinitFormInfo.action && this.curinitFormInfo.action('x4vkb1qpxupek')
				this.runconnectAction();
			},
			runconnectAction() {
				
				let that = this;
				let token="hwqrppVQNicng1peuiTz9JGeaCBDOoa2MKx0svgqBPA=@dxbv.cn.rongnav.com;dxbv.cn.rongcfg.com"
				uni.showLoading({})
				 that.$http(
				 	'common.rongyun',{
						memberId:uni.getStorageSync("UId"),
						refresh:false
					},
				 ).then(res => {
					
				 	// if(res.code===200){
						  token = res.token;
						 this.curconnectFormInfo.action && this.curconnectFormInfo.action(token)
					                  // }
				 });
			},
		
		}
	}
</script>

<style>
	.container {
		padding-bottom: 80px;
	}
	.content {
		padding: 10px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
		
	}
	.btn {
		margin-bottom: 10px;
		margin-right: 10px;
		margin-left: 10px;
	}
	.detail-container {
		max-height: 70vh;
		overflow: scroll;
	}
	.footer {
		padding: 10px 7px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #c0c0c0;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		color: #fff;
		font-size: 16px;
	}
	.footer-btn {
		display: inline-block;
		margin-left: 5px;
		padding: 3px;
		color: #2DB7F5
	}
	
	.top-bar-center {
		flex: 1;
		text-align: center;
	}
	.search {
		width: 88rpx;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
		
		.add {
			height: 88rpx;
			width: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		

	.top-bar {
		padding-top: var(--status-bar-height);
		z-index: 1;
		position: fixed;
		width: 100%;
		display: flex;
		height: 88rpx;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		/* box-shadow: 0px 1px 0px 0px rgba($color: #8f8f8f, $alpha: 0.1); */
	
	}
	
	.top-bar {
		background-color: rgba(244, 244, 244, 1);
	}
	
	page {
		background-color: rgba(244, 244, 244, 1);
	}
	
	.chat-main {
	
	
	}
	.chat-list {
		display: flex;
		flex-direction: column;
		flex-wrap: warp;
		padding-top: 92rpx;
		padding-bottom: 300rpx;

	}
	.chat-item-left {
		padding-left: 30rpx;
		display: flex;
		flex-direction: column;

	}
	.chat-header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
		
	}
	
	.chat-header.text {
		font-size: 24rpx;
		color: #272832;
	}
	.chat-content {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.usesr-avatar {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
			
		
	}
	.usesr-avatar.image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
		
	.usesr-avatar.text {
		text-align: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(39, 40, 50, 1);
	}
	
	.user-image.image  {
		 
			width: 320rpx;
			height: 320rpx;
			border-radius: 40rpx;
			margin-left: 20rpx;
		 
	}
			
	.user-text {
		position: relative;
		margin-left: 50rpx;
		margin-right: 100rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		padding: 20rpx;
			
		
	}
	.user-text.text {
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(39, 40, 50, 1);
	}
	.user-text:before {
		position: absolute;
		content: "\00a0";
		width: 0rpx;
		height: 0rpx;
		border-width: 16rpx 36rpx 16rpx 0;
		border-style: solid;
		border-color: transparent #FFFFFF transparent transparent;
		top: 30rpx;
		left: -36rpx;
	}
	.chat-item-right {
		padding-left: 30rpx;
		display: flex;
		flex-direction: column;

	}
	.chat-header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
		
	}
	.chat-header.text {
		font-size: 24rpx;
		color: #272832;
	}
	.chat-content {
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-start;
	}
	.usesr-avatar {
		padding: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
			
		
	}
	.usesr-avatar.image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
		
	.usesr-avatar.text {
		text-align: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(39, 40, 50, 1);
	}
	 {
		position: relative;
		display: flex;
		align-items: center;
		margin-left: 100rpx;
		margin-right: 50rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		color: white;
		background: #6699FF;
			
	
			
		
	}
	.user-text-right.text {
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 30rpx;
	}
	.user-text-right-box {
		position: absolute;
		content: "\00a0";
		display: inline-block;
		top: 30rpx;
		width: 0rpx;
		height: 0rpx;
		border-width: 16rpx 0rpx 16rpx 36rpx;
		right: -36rpx;
		border-style: solid;
		border-color: transparent transparent transparent #6699FF;
	}
	
	.input-box.input {
		 
			width: 500rpx;
			height: 72rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 10rpx;
		
	}
	.chat-botton {
		position: fixed;
		bottom: -5rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 128rpx;
		background: rgba(244, 244, 244, 1);
		box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
	
	}
	
	 {
		width: 188rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		
	}
	
	.right-icon.image {
		width: 56rpx;
		height: 56rpx;
	}
	 {
		padding-left: 12rpx;
		padding-right: 12rpx;
		display: flex;
		align-items: center;
		
		
	}
	.left-icon.image {
		width: 56rpx;
		height: 56rpx;
	}
	.join-center {
		padding: 30rpx;
		display: flex;
		justify-content: center;
	
		
	}
	
	.join-center.text {
		font-size: 24rpx;
	}
	
</style>
